<template>
  <div class="long-block" @click="toAnimeMain(id)">
    <ToDialog class="dialog">
      <h4>{{ title }}</h4>
      <h4 class="bottom-shade"></h4>
    </ToDialog>
    <BaseImg :src="cover" />
  </div>
</template>

<script>
import { toAnimeMain } from '@/router/jump'

import BaseImg from '../Global/BaseImg.vue'
import ToDialog from '../Global/ToDialog.vue'

export default {
  name: 'LongBlock',
  components: {
    BaseImg,
    ToDialog
  },
  props: {
    cover: {
      default: ''
    },
    title: {
      default: ''
    },
    id: {
      default: 0
    }
  },
  setup() {
    return {
      toAnimeMain
    }
  }
}
</script>

<style lang="scss" scoped>
.long-block {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  .dialog {
    opacity: 0;
    transition: all 0.25s;
    &:hover {
      transition: all 0.25s;
      opacity: 2;
    }
    h4 {
      position: absolute;
      left: 10px;
      bottom: 10px;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 300;
      color: white;
      z-index: 1;
    }
    .bottom-shade {
      position: absolute;
      bottom: -100%;
      left: -10%;
      width: 120%;
      height: 100%;
      box-shadow: 0 -10px 30px #000;
      z-index: 0;
      background-color: none;
    }
  }
}
</style>
